<!--
author: 何其沆(pooky)
desc: Pool - Account Pool - Search Check
date: 2021-11-12
-->
<template>
  <div class="card">
    <div class="page-search">
      <div class="search-item">
        <span class="search-text">XXX@</span>
        <a-input v-model:value="mailBox" placeholder="Please enter the email suffix to be detected" />
      </div>
      <div class="buttons">
        <a-button @click="handleReset">Reset</a-button>
        <a-button class="search" @click="handleSearch">Search</a-button>
      </div>
    </div>
    <a-spin :spinning="loading" tip="Loading...">
      <div class="never-contact-email">
        <div class="top">Never Contact Email</div>
        <div class="content">
          <!--        :class="[{ 'content-ani': isAnim }]"-->
          <!--        :style="{ 'animation-delay': 0.1 * index + 's' }"-->
          <div v-for="(item, index) in neverContactEmail" :key="index" class="content-item">
            {{ item.email }}
          </div>
        </div>
        <div v-if="neverContactEmail.length === 0" class="content content-none">
          <NoData fontSize="172px" />
          <div class="des">Your search did not match any data.</div>
        </div>
      </div>
    </a-spin>
  </div>
</template>

<script setup>
import { ref, inject } from 'vue'
import Pool from '@/api/pool.js'
import NoData from '../../../components/NoData.vue'
const { message } = inject('Feedback')
// 动画测试
const isAnim = ref(false)
// email搜索内容
const mailBox = ref('')
// 永不联系email
const neverContactEmail = ref([])
const loading = ref(false)
/**
 * 获取email列表
 */
const getEmailList = () => {
  isAnim.value = true
  if (!mailBox.value.trim()) {
    message.error('Please enter the email suffix to be detected.')
    return
  }
  loading.value = true
  Pool.adminSearchCheck(mailBox.value.trim())
    .then(res => {
      if (res.code === 2000) {
        neverContactEmail.value = res.data
        setTimeout(() => {
          isAnim.value = false
        }, 2000)
      }
    })
    .catch(() => {
      neverContactEmail.value = []
    })
    .finally(() => {
      setTimeout(() => {
        loading.value = false
      }, 30)
    })
}
/**
 * 重置
 */
const handleReset = () => {
  mailBox.value = ''
  neverContactEmail.value = []
}
/**
 * 检查
 */
const handleSearch = () => {
  getEmailList()
}
</script>

<style scoped lang="less">
.card {
  width: 100%;
  //height: 628px;
  background-color: @white;
  border-radius: 0 4px 4px 4px;
  box-shadow: 0 1px 3px @shadow-color;
  padding: 24px;
  box-sizing: border-box;
  .page-search {
    position: relative;
    padding-bottom: 24px;
    border-bottom: 1px solid @border-color;
    .search-item {
      margin-right: 20px;
      .search-text {
        color: @text-gray;
        font-size: 14px;
        margin-right: 12px;
        margin-bottom: 6px;
      }
    }
    .buttons {
      position: absolute;
      right: 0;
      bottom: 24px;
      .search {
        background-color: @function;
        border-color: @function;
        color: @white;
        margin-left: 24px;
        &:focus,
        &:hover {
          background-color: @function-hover;
          border-color: @function-hover;
        }
      }
    }
  }
  .never-contact-email {
    margin-top: 24px;
    width: 100%;
    border: 1px solid @border-color;
    //max-height: 470px;
    overflow-y: auto;
    .top {
      width: 100%;
      height: 40px;
      background-color: @bg-color;
      border-bottom: 1px solid @border-color;
      font-size: 14px;
      color: @text-gray;
      display: flex;
      align-items: center;
      padding-left: 13px;
      font-weight: 700;
    }
    .content {
      .content-item {
        width: 100%;
        height: 40px;
        font-size: 14px;
        display: flex;
        align-items: center;
        padding-left: 13px;
        color: @black-85p;
        border-bottom: 1px solid @border-color;
        &:last-child {
          border-bottom: none;
        }
      }
      .content-ani {
        animation-name: move;
        animation-duration: 0.5s;
        opacity: 0;
        animation-fill-mode: forwards;
      }
      .des {
        color: @text-gray;
      }
      @keyframes move {
        0% {
          opacity: 0;
          transform: translate(0, 100%);
        }
        100% {
          opacity: 1;
          transform: translate(0, 0);
        }
      }
    }
    .content-none {
      height: 255px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }
  }
  :deep(.ant-input) {
    width: 360px;
    height: 32px;
    border-radius: 2px;
    border: 1px solid @border-color;
  }
}
</style>
